<template>
  <div class="head">
    <div class="move">

    </div>
    <div class="window">
      <i class="el-icon-s-fold" @click="showWebCollect"></i>
      <el-dropdown size="small" placement="bottom" :hide-on-click="false"  >
        <i class="el-icon-set-up selectIcon" style=""></i>
        <el-dropdown-menu slot="dropdown" class="header-dropdown">
          <el-dropdown-item style="padding-top: 8px;">
            <el-avatar shape="square" :size="100" :src="photoUrl" style="border: 1px solid #d7d6d1"></el-avatar>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-switch
                class="bjs-switch"
                v-model="themeValue"
                inactive-text="夜间模式"
                @change="changeTheme"
            ></el-switch>
          </el-dropdown-item>
          <el-dropdown-item icon="el-icon-odometer" @click.native="console" divided>
            控制台
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <i class="el-icon-minus" @click="minimize"></i>
      <i class="el-icon-full-screen" @click="maximize"></i>
      <i class="el-icon-close" @click="close" style="font-size: 30px;"></i>
    </div>

    <el-drawer
        direction="rtl"
        class="bjs-drawer"
        title="(^._.^)ﾉ"
        size="35%"
        :modal="false"
        :visible.sync="webVisible">
      <webCollect></webCollect>
    </el-drawer>

  </div>
</template>

<script>
const ipc = require('electron').ipcRenderer
import webCollect from "../../components/webCollect"

export default {
  name: 'bjsHeader',
  data () {
    return {
      webVisible: false,
      themeValue: false,
      switchTheme : {
        inactiveColor: '#DCDFE6',
        activeColor: '#AD8CF2'
      }
    }
  },
  methods: {
    login () {

    },
    console () {
      ipc.send('console-show')
    },
    minimize () {
      ipc.send('window-min')
    },
    maximize () {
      ipc.send('window-max')
    },
    close () {
      ipc.send('window-hide')
    },
    changeTheme () {
      if (this.themeValue) {
        window.document.documentElement.setAttribute('data-theme','night')
        this.$store.commit('SET_THEME_TYPE','night')
      } else {
        window.document.documentElement.setAttribute('data-theme','light')
        this.$store.commit('SET_THEME_TYPE','light')
      }
    },
    showWebCollect () {
      this.webVisible = !this.webVisible
    }
  },
  computed: {
    photoUrl () {return this.$store.state.config.userInfo.photoUrl},
       theme () {return this.$store.state.config.theme.type}
  },
  mounted: function () {
    this.themeValue = this.$store.state.config.theme.type === 'night'
    this.changeTheme()
  },
  components: {
    webCollect
  }
}
</script>

<style scoped lang="scss">
.head {
  @include flex(row,space-between,center);
  @include boxBase(100%,100%);
}

.head .move {
  @include boxBase(88%,100%);
  -webkit-app-region: drag;
}

.head .selectIcon {
  color: #7e7d78;
  font-size: 23px;
}

.head .window {
  @include flex(row,space-around,center);
  @include boxBase(190px,100%);
  font-size: 23px;
  color: #7e7d78;
  .show-tool {
    width: 20px;
    cursor: pointer;
    .show-tool-icon {
      @include boxBase(20px,20px);
    }
  }
  i {
    &:hover {
      @include color();
    }
  }
}


.header-dropdown {
  border: 0 ;

  [data-theme="night"] & {
    border-color: $theme-bg-color-night;
    background-color: $theme-bg-color-night;
    box-shadow: 0 2px 12px 0 rgba(162, 126, 42, 0.5);
  }

  /deep/ .el-dropdown-menu__item--divided{
    border-top: 0px solid #EBEEF5;
    &:before {
      @include themeBgColor($theme-color-light,$theme-color-night-dark);
      height: 1px !important;
    }
  }

  /deep/ .el-dropdown-menu__item {
    @include themeColor($theme-color-light,$theme-color-night-dark);
    @include themeBgColor($theme-bg-color-light,$theme-bg-color-night);
  }
  /deep/ .el-dropdown-menu__item:hover {
    @include themeColor($theme-color-light,$theme-color-night);
    @include themeBgColor($theme-bg-color-light,$theme-bg-color-night);
  }
  /deep/ .el-dropdown-menu__item:focus {
  }
  /deep/ .popper__arrow {
    [data-theme="night"] & {
      color: #2D2B30 !important;
      border-bottom-color: #2D2B30 !important;
      &::after {
        border-bottom-color: #2D2B30 !important;
      }
    }
  }
}
</style>
